<template>
  <div class="business-page">
    <div class="flex items-center justify-between">
      <TitleName
        title="商机记录"
        icon="i-carbon-bookmark-filled"
        class="title text-#000"
      ></TitleName>
    </div>
    <el-table
      class="mt-2"
      ref="multipleTableRef"
      :data="tableData"
      style="width: 100%; margin-top: 20px"
      border
    >
      <!-- <el-table-column type="selection" width="55" align="center" /> -->
      <el-table-column prop="titleName" label="商机标题" width="200" />
      <el-table-column
        prop="belongName"
        label="负责人"
        width="110"
        align="center"
      >
      </el-table-column>
      <el-table-column prop="" label="商机状态" align="center">
        <template #default="scoped">
          <span>{{
            business_stage.find(item => item.value == scoped.row.status)
              ? business_stage.find(item => item.value == scoped.row.status)
                  .label
              : '--'
          }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="" label="项目类型" align="center">
        <template #default="scoped">
          <span>{{
            project_type.find(item => item.value == scoped.row.projectType)
              ? project_type.find(item => item.value == scoped.row.projectType)
                  .label
              : '--'
          }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="" label="商机来源" align="center">
        <template #default="scoped">
          <span>{{
            business_source.find(item => item.value == scoped.row.resource)
              ? business_source.find(item => item.value == scoped.row.resource)
                  .label
              : '--'
          }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="followTime"
        label="最后跟进"
        width="160"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="dayNum"
        label="未跟进天数"
        align="center"
      ></el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>
<script setup name="businessInfo">
import { reactive, getCurrentInstance, toRefs } from 'vue'

import {
  business_stage,
  business_source,
  project_type
} from '@/hooks/dict/business.js'
import { getBusinessOpportunityList } from '@/api/salesManage/businessManage'
import { useRouter } from 'vue-router'
const { proxy } = getCurrentInstance()
// 通用数据store
const router = useRouter()
const route = useRoute()
const props = defineProps({
  tableParam: {
    type: Array
  }
})

const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    businessId: '',
    businessType: ''
  },
  total: 0,
  tableData: []
})
const { tableData, queryParams, total } = toRefs(data)

/**
 * 获取列表数据
 */
function getList() {
  console.info('123', queryParams.value)
  queryParams.value.businessId = props.tableParam.businessId
    ? props.tableParam.businessId
    : ''
  queryParams.value.businessType = props.tableParam.businessType
    ? props.tableParam.businessType
    : ''
  getBusinessOpportunityList(queryParams.value).then(res => {
    tableData.value = res.rows
    total.value = res.total
  })
}

onMounted(() => {
  if (JSON.stringify(props.tableParam) != '{}') {
    console.log('props.tableParam', props.tableParam)
    getList()
  } else {
    getList()
  }
})
</script>
<style lang="scss" scoped>
.business-page {
  display: block;
}
</style>
